<template>
  <div class="login-container">
    <el-card class="login-box">
      <div class="logo">
        <img src="https://picsum.photos/100/100?random=1" alt="App Logo">
        <h2>系统登录</h2>
      </div>

      <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginFormRef"
          @submit.native.prevent="handleLogin"
      >
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              placeholder="请输入账号"
              clearable
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              show-password
              clearable
          ></el-input>
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="loginForm.remember">记住账号</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              native-type="submit"
              :loading="loading"
              class="login-btn"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>

      <!--      <div class="footer-links">-->
      <!--        <a href="#">忘记密码?</a>-->
      <!--        <a @click="register">注册账号</a>-->
      <!--      </div>-->
    </el-card>
  </div>
</template>

<script>
import {login} from '@/api/login'

export default {
  name: 'LoginPage',
  data() {
    return {
      loading: false,
      loginForm: {
        username: '',
        password: '',
        remember: false
      },
      loginRules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ]
      }
    }
  },
  mounted() {
    console.log(21212)
    let remember = localStorage.getItem('remember')
    if (remember !== undefined && remember !== null && remember === 'true') {
      this.loginForm.remember = true
    }

    if (this.loginForm.remember !== 'null' && this.loginForm.remember) {
      this.loginForm.username = localStorage.getItem('username')
    } else {
      this.loginForm.username = null
    }

  },
  methods: {
    register() {
      this.$router.push('/register')
    },
    handleLogin() {
      this.$refs.loginFormRef.validate(valid => {
        if (valid) {
          this.loading = true
          login(this.loginForm.username, this.loginForm.password).then(res => {
            this.loading = false
            if (res.code === 200) {
              this.$message.success('登录成功')

              localStorage.setItem('token', res.data)
              console.log('登录成功' + res.data)
              localStorage.setItem('remember', this.loginForm.remember)
              if (this.loginForm.remember !== 'null' && this.loginForm.remember) {
                localStorage.setItem('username', this.loginForm.username)
              }
              setTimeout(() => {
                this.$router.push('/')
              }, 1500)

            }
          })

        }
      })

    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  width: 400px;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.logo {
  text-align: center;
  margin-bottom: 30px;
}

.logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.logo h2 {
  color: #333;
  font-size: 22px;
}

.login-btn {
  width: 100%;
  height: 45px;
  font-size: 16px;
}

.footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.footer-links a {
  color: #999;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  color: #409EFF;
}
</style>
